<template>
    <view class="mine-container" :style="{ height: `${windowHeight}px` }">
        <view class="header-section">
            <view class="header-section-text" style="">
                <view>
                    <u-icon name="/static/images/zuanshi.png" size="30"></u-icon>
                </view>
                <view class="text">
                    我的积分：
                </view>
                <view class="text">100</view>
            </view>
            <view class="content-section">
                <view class="content-section-one" style="">
                    <view>
                        <u-icon name="reload" color="#fff" size="28"></u-icon>
                    </view>
                    <view>
                        刷新二维码
                    </view>
                </view>
                <view class="qrcode">
                    <u--image :showLoading="true" :src="src" :fade="true" mode="widthFix" width="300rpx" height="300rpx"
                        duration="450"></u--image>
                </view>
            </view>
        </view>
        <view class="integral-details">
            <view class="integral-title">
                <view class="integral-icon">
                </view>
                <view class="integral-text">积分明细</view>
                <view class="integral-icon">
                </view>
            </view>
            <view class="integral-list" v-if="list.length > 0">
                <view class="card" v-for="(item, index) in list" :key="index">
                    <view style="display: flex;flex: 4;">
                        <view class="text-container">
                            <view>
                                <span class="label">{{
        item.planExaminationName
    }}</span>
                            </view>
                            <view>
                                <span class="time">{{ item.createTime }}</span>
                            </view>
                        </view>
                    </view>
                    <view style="flex: 1;color: #F7BA1E;font-weight: bold;">
                        +40
                    </view>
                    <view></view>
                </view>
                <view>
                    <u-loadmore @loadmore="loadmore" :status="status" />
                </view>
            </view>
            <view v-else>
                <u-empty mode="data">
                </u-empty>
            </view>
        </view>
    </view>
</template>

<script>
import storage from '@/utils/storage'
import { getStudentExaminationPlanList } from '@/api/train/index.js'
export default {
    data() {
        return {
            name: this.$store.state.user.name,
            version: getApp().globalData.config.appInfo.version,
            src: "/static/images/qrcode.png",
            status: "loadmore",
            list: [],
            pageNum: 1,
            pageSize: 5,
            listHeight: 0 // 新增高度计算变量
        }
    },
    computed: {
        windowHeight() {
            return uni.getSystemInfoSync().windowHeight - 50
        }
    },
    mounted() {
        this.loadList();
    },
    methods: {

        async loadList() {
            const { rows, total, code, msg } = await getStudentExaminationPlanList({ pageNum: this.pageNum, pageSize: this.pageSize });
            if (code == 200) {
                // 合并新旧数据（使用扩展运算符）
                this.list = [...this.list, ...rows];
                // 根据是否还有数据更新状态
                this.status = this.list.length >= total ? "nomore" : "loadmore";
            }
        },
        loadmore() {
            if (this.status === "nomore") return;
            this.pageNum++;
            this.status = "loading";
            this.loadList();
        },

    }
}
</script>

<style lang="scss" scoped>
.header-section {
    padding: 20px 15px 45px 15px;
    background-color: #165DFF;
    color: white;

    .header-section-text {
        display: flex;
        align-items: center;
    }
}

.text {
    font-weight: bold;
    font-size: 30rpx;
    line-height: 30px;
    margin-left: 10rpx;
}

.content-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 40rpx;

    .content-section-one {
        display: flex;
        align-items: center;
    }

    .qrcode {
        margin-top: 20rpx;
    }
}

.card {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 140rpx;
    align-items: center;
    // 方法二：直接使用border
    border-bottom: 2rpx solid #eee;

    // 排除最后一个元素的横线
    &:not(:last-child) {
        border-bottom: 2rpx solid #eee;
    }
}

.btton-container {
    flex: 2;
}

.text-container {
    padding: 10px;
    display: flex;
    height: 130rpx;
    flex-direction: column;
    justify-content: space-between;

    .label {
        font-size: 36rpx;
        color: #333333;
        font-weight: bold;
    }

    .time {
        color: #999999;
    }

}

.integral-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    margin-top: 20rpx
}

.integral-list {
    overflow-y: scroll;
    width: 100%;
}

.integral-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
}

.integral-icon {
    width: 16rpx;
    height: 16rpx;
    background-image: linear-gradient(to right, rgba(232, 243, 255, 0.6), rgba(22, 93, 255, 0.6));
    border-radius: 50%;
    margin-right: 8rpx;
}

.integral-text {
    margin-right: 10rpx;
    margin-left: 10rpx;
    color: #165DFF;
}
</style>